<template>
  <div
    class="item"
    @click="$emit('aclick',x,y,true)"
    @contextmenu.prevent="$emit('rightClick',x,y )"
  >
    <img :src="boom" alt v-if="item.item==='boom'" :class="isBB">
    <div v-if="item.isShow" :class="['wai',isPushed]"></div>
    <img :src="qi" alt class="qi" v-if="item.isChecked">
    {{item.item!=='boom'&&item.item!==0?item.item:''}}
  </div>
</template>

<script>
import boom from "../assets/图层2.png";
import qi from "../assets/图层 1.png";
export default {
  props: ["x", "y", "item", "isBoom", "push"],
  data() {
    return {
      boom,
      qi
    };
  },
  computed: {
    isBB() {
      if (this.isBoom.length > 0) {
        return this.isBoom[0] === this.x && this.isBoom[1] === this.y
          ? "abc"
          : "";
      }
    },
    isPushed() {
      const result = this.push.some(item => {
        return this.x === item[0] && this.y === item[1];
      });
      return result ? "aa" : "";
    }
  }
};
</script>

<style>
.item {
  position: relative;
  width: 25px;
  height: 25px;
  background: rgb(248, 248, 248);
  border: 1px solid rgb(128, 128, 128);
  cursor: pointer;
}
* {
  box-sizing: border-box;
}
.wai {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 25px;
  height: 25px;
  background: rgb(201, 201, 201);
  border: 1px solid rgb(105, 105, 105);
}
img {
  width: 25px;
  height: 25px;
  position: absolute;
  left: -1px;
  top: -1px;
}
.abc {
  background: rgb(255, 0, 0);
}
.qi {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 5px;
  top: 5px;
}
.aa {
  background: rgb(221, 221, 221);
}
</style>
